iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
1
Modern Web

ASP.NET MVC網頁程式介紹系列 第 24

[Day 24] 當ASP.NET MVC遇到Ajax (二)

  • 分享至 

  • xImage
  •  

今天繼續昨天的Ajax的分享,
今天分享到後端的部分,
首先在Controller這邊接收Post資料

[HttpPost]
public ActionResult Village(string id = "")
{
    List<Village> list = db.GetVillageList(id);
    string result = "";
    if (list == null)
    {
        //讀取資料庫錯誤
        return Json(result);
    }
    else
    {
        result = JsonConvert.SerializeObject(list);
        return Json(result);
    }
}

先從資料庫抓出List資料,
然後使用之前介紹的第三種方式Json.Net轉換成Json文字,
再回傳到前端讓頁面接收,

下面是抓List資料的Function

public List<Village> GetVillageList(string id)
{
    try
    {
        Connect();
        string sql = @" SELECT `VillageId`, `Village` FROM `Village` WHERE `CityId` = @cityId";
        MySqlCommand cmd = new MySqlCommand(sql, conn);
        cmd.Parameters.Add("@cityId", id);
        List<Village> list = new List<Village>();

        using (MySqlDataReader dr = cmd.ExecuteReader())
        {
            while (dr.Read())
            {
                Village data = new Village();
                data.VillageId = dr["VillageId"].ToString();
                data.VillageName = dr["Village"].ToString();
                list.Add(data);
            }
        }
        return list;
    }
    catch (Exception ex)
    {
        string error = ex.ToString();
        return null;
    }
    finally
    {
        Disconnect();
    }
}

如此結合昨天的前端部分,
就完成了Ajax完整的流程。

--
小弟不才,
如果有謬誤或是要補充的,
都歡迎一起來討論!


上一篇
[Day 23] 當ASP.NET MVC遇到Ajax (一)
下一篇
[Day 25] 用ASP.NET MVC 做簡單的註冊及登入系統(一)
系列文
ASP.NET MVC網頁程式介紹30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
wilson1966
iT邦研究生 1 級 ‧ 2019-01-23 13:22:45

string sql = "SELECT VillageId,Village FROM Village Where CityId=" + id;

小魚 iT邦大師 1 級 ‧ 2019-01-23 18:30:59 檢舉

如果id是數字還好,
文字就不適合這樣寫了.

itsteven iT邦新手 5 級 ‧ 2021-05-11 09:04:47 檢舉

string sql = "select VillageId,Village from Village where CityId=@CityId";
cmd.Parameters.AddWithValue("@CityId", id);

請問我這樣寫法好嗎,因為原文好像沒有把cityId的篩選條件寫上去,他會拿到所有的village資料

小魚 iT邦大師 1 級 ‧ 2021-05-11 12:42:29 檢舉

itsteven wilson1966
之後漏寫CityId了...
剛剛有修正了,
不過沒有實機測試過,
看起來應該是沒有錯吧...

要用AddWithValue應該也可以,
實機跑看看能不能跑就知道了.

0
zyxa9527
iT邦新手 5 級 ‧ 2020-02-15 09:53:52

我都按照大大的步驟走 沒錯誤但都沒成功啟動change的感覺
請問可能是什麼原因呢?
https://ithelp.ithome.com.tw/upload/images/20200215/20123840I3EmSetz1r.png

 try {
        $("#city").change(function () {
            var value = $("#city").val();
            console.log(value);

            $.ajax({
                type: "Post",
                url: "../Home/Village?id=" + value,
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (data) {
                    $("#village").empty();
                    if (data == "") {
                    $("#village").append("<option value=''>請選擇縣111</option>");
                    }
                    else {
                     var jo = JSON.parse(data);
                     $("#village").append("<option value=''>請選擇333</option>");
                     for (i = 0; i < jo.length; i++) {
                         $("#village").append("<option value='" + jo[i].VillageId + "'>" + jo[i].VillageName + "</option>");
                     }
                    }
                },
                failure: function (errMsg) {
                  $("#village").empty();
                  $("#village").append("<option value=''>請選擇縣222</option>");
                }
            })
        });
    }
    catch (e) {
        logMyErrors(e) // 把例外物件傳給錯誤處理器)
    }
小魚 iT邦大師 1 級 ‧ 2020-02-16 08:57:19 檢舉

F12是個好東西,
先確認是後端的問題的還是前端的問題,
然後...你有載入jQuery了嗎?

zyxa9527 iT邦新手 5 級 ‧ 2020-02-18 09:44:36 檢舉

阿果然是jQuery的問題
後來改路徑就Ok了 感謝
學了會看F12之外也上了寶貴的一課

我要留言

立即登入留言